為了要應用於Adapter使用自己的Layout，目前我們分別在前兩天的練習中建立了幾個檔案：

• Day 25. 定義自己的Layout應用於ArrayAdapter (Part.1)
  • 自己的Layout，檔案為list_item.xml
  • 自己的class，檔案為NameMapping.java
• Day 26. 定義自己的Layout應用於ArrayAdapter (Part.2)
  • 自己的Adapter，檔案為TortoisesAdapter.java，其繼承原始ArrayAdapter

在手機上執行起來如下：

現在我們想在各個物種學名及中文的旁邊加上對應圖片，則有3部份需要修改：

1. 修改Layout並在App加入所需圖片
2. 讓文字能與圖片連結
3. 讓ImageView設定正確的圖片

1.修改Layout並在App加入所需圖片

開啟在Day 25建立的layout檔案list_item.xml。

• 加入一個ImageView，在此使用Vertical Layout(學名與中文名垂直排列)嵌入Horizental Layout(圖片在文字左側)，也就是Nested View Groups(參考Day 9. 第三種ViewGroup的練習)。
• 把準備好的圖片放入資源路徑中（icon類圖片位於res/mipmap路徑下，而非res/drawable）。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"/>
    
    <TextView
        android:id="@+id/tortoises_text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:text="Cyclemys trifasciata"/>

    <TextView
        android:id="@+id/default_text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_turtle_1"/>
</LinearLayout>

2. 文字與圖片連結

修改NameMapping類別

為了要讓圖片對應到相應的物種，我們進入NameMapping類別。
目前此類別提供的是學名與中文名稱的對應。

• 取得圖片的id，讓NameMapping類別都有2個String(學名和中文明)及1個Integer(圖片id)
• 建立一個public方法來傳回圖片id
• 建立一個具備3個參數的建構式

package com.example.android.eventlistener_practice;
public class NameMapping {

    //烏龜的學名
    private String mTortoisesSciName;

    //烏龜的中文
    private String mTortoisesTwName;

    //圖片資源id
    private int mImgResId;

    //建構式1
    public NameMapping(String tortoisesSciName, String tortoisesTwName){
        mTortoisesSciName = tortoisesSciName;
        mTortoisesTwName = tortoisesTwName;
    }
    
    //建構式2
    public NameMapping(String tortoisesSciName, String tortoisesTwName, int imgResId){
        mTortoisesSciName = tortoisesSciName;
        mTortoisesTwName = tortoisesTwName;
        mImgResId = imgResId;
    }

    //方法1.傳回學名
    public String getTortoisesSciName(){
        return mTortoisesSciName;
    }

    //方法2.傳回中文名
    public String getTortoisesTwName(){
        return mTortoisesTwName;
    }

    //方法3.傳回圖片id
    public int getImageResId(){
        return mImgResId;
    }
}

修改MainActivity

現在NameMapping類別的建構式2可以接受3個參數，我們將第三個參數(圖片id)一一補上：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tortoises.add(new NameMapping("Cyclemys trifasciata", "金錢龜", R.mipmap.ic_turtle_1));
        tortoises.add(new NameMapping("Chinemys reevesiis", "草龜", R.mipmap.ic_turtle_2));
        tortoises.add(new NameMapping("Mauremys mutica", "黃喉擬水龜", R.mipmap.ic_turtle_3));
        tortoises.add(new NameMapping("Ocadia sinensis", "花龜", R.mipmap.ic_turtle_4));
        tortoises.add(new NameMapping("Platysternon megacephalum", "大頭龜", R.mipmap.ic_turtle_5));
        tortoises.add(new NameMapping("Trachemys scripta elegans", "紅耳龜", R.mipmap.ic_turtle_6));
        tortoises.add(new NameMapping("Chelodina siebenrocki", "北部蛇頸龜", R.mipmap.ic_turtle_7));
        tortoises.add(new NameMapping("Carettochelys insculpta", "豬鼻龜", R.mipmap.ic_turtle_8));
        tortoises.add(new NameMapping("Chelydridae", "鱷龜", R.mipmap.ic_turtle_9));
        tortoises.add(new NameMapping("Graptemys", "地圖龜", R.mipmap.ic_turtle_10));

        TortoisesAdapter adapter = new TortoisesAdapter(this, tortoises);
        ListView listView = findViewById(R.id.list);
        listView.setAdapter(adapter);
    }
}

3.讓ImageView讀取正確的圖片

進入自訂的AdapterTortoisesAdapter.java。
其中getView()方法是回傳一個listItemView給ListView

public class TortoisesAdapter extends ArrayAdapter<NameMapping> {

    //建構式
    public TortoisesAdapter(Activity context, ArrayList<NameMapping> tortoises){
        super(context,0, tortoises);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View listItemView = convertView;
        if(listItemView == null){
            listItemView = LayoutInflater.from(getContext()).inflate(R.layout.list_item, parent, false);
        }

        //找到data，並在View上設定正確的data
        NameMapping currentName = getItem(position);

        //找到ListItem.xml中的兩個TextView(物種學名和中文名)
        TextView tortoises_text_view = listItemView.findViewById(R.id.tortoises_text_view);
        tortoises_text_view.setText(currentName.getTortoisesSciName());

        TextView default_text_view = listItemView.findViewById(R.id.default_text_view);
        default_text_view.setText(currentName.getTortoisesTwName());

        return listItemView;
    }
}

在手機上執行：

References

• Android Developers ArrayAdapter
• Android Basics: Multiscreen Apps by Google
• 維基百科 三線閉殼龜
• 維基百科 草龜
• 維基百科 黃喉擬水龜
• 維基百科 花龜
• 維基百科 大頭龜
• 維基百科 紅耳龜
• 維基百科 北部蛇頸龜
• 維基百科 豬鼻龜
• 維基百科 鱷龜
• 維基百科 地圖龜